<template>
    <div class="box-details">
        <div class="content">
            <div class="header">
                <img @click="router.back()" src="@/assets/img/Details/icon_arrow_left_min_circle_gray.png" alt="">
                <el-carousel height="375px">
                    <el-carousel-item v-for="item in bannerList" :key="item">
                        <el-image :src="item" />
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="price-box">
                <span>￥{{ Model?.price }}</span>
                <img src="@/assets/img/Details/icon_product_unfavor.png" alt="">
            </div>
            <div class="info">
                <div class="title-box">
                    <img src="@/assets/img/Details/tag_self_new.png   " alt="">
                    <p class="title">{{ Model?.name }}</p>
                </div>
                <p class="details">{{ Model?.brief }}</p>
            </div>
            <img class="discount" src="@/assets/img/Details/dfae4d83b02472999fcd224ae1b41935.png" alt="">
            <div class="address">
                <p>
                    <span>已选</span>
                    <span>标配：平板主机+键盘+充电器X1</span>
                    <img src="@/assets/img/Details/icon_arrow_right_min_lightgray.png" alt="">
                </p>
                <p><span>送至</span>
                    <span>天津天津市和平区南市街道</span>
                    <img src="@/assets/img/Details/icon_arrow_right_min_lightgray.png" alt="">
                </p>
            </div>
            <img v-for="item in urls" :src='item' />
        </div>
        <div class="footer">
            <div class="shop-cart">
                <img src="@/assets/img/Details/mi_shop_icon.png" alt="">
                <p>小米</p>
            </div>
            <div class="shop-cart">
                <img src="@/assets/img/Details/icon_shop_cart.png" alt="">
                <p>购物车</p>
            </div>
            <div class="btn-box">
                <button @click="isEdit = true">加入购物车</button>
                <button>立即购买</button>
            </div>
        </div>
        <div class="dialog" :class="{ active: !isEdit }">
            <div class="warp">
                <img @click="isEdit = false" src="@/assets/img/Details/close_circle_grey_new.png" alt="">

                <div class="num">
                    <span>数量</span>
                    <MiCount v-model:count="model.count" :disabled="model.count === 0"></MiCount>
                </div>
                <div class="footer-dialog">
                    <button @click="save">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ProductApi } from '@/api';
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useCart } from '@/store';
import MiCount from '@/components/MiCount/MiCount.vue';
import { CartApi } from '@/api';

const Cart = useCart()
const route = useRoute()
const router = useRouter()
const Model = ref<Vm.Product>()
const bannerList = ref<string[]>()
const urls = ref<string[]>()
const model = reactive<HttpPayload.Addshop>({
    pid: 0,
    count: 1
})
const isEdit = ref<boolean>(false)

onMounted(async () => {
    Model.value = await ProductApi.getItem(parseInt((route.params.id) as string))
    model.pid = Model.value.id
    if (Model.value.bannerImgs && Model.value.otherImgs) {
        bannerList.value = Model.value?.bannerImgs.split(',')
        urls.value = Model.value?.otherImgs.split(',')
    }
})
const save = async () => {
    await CartApi.add(model)
    Cart.isInit = false
    isEdit.value =false
}
</script>
<style scoped lang="stylus">
.dialog
    position fixed
    background-color rgba(0,0,0,.5)
    width 100vw
    height 100vh
    z-index 99
    transition 1s
.dialog.active
    transform translateY(100%)
.warp
    background-color #fff
    position absolute
    left 0
    right 0
    top 40%
    bottom 0
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display flex
    flex-direction column
    justify-content space-between
    
.warp img
    align-self flex-end
    width 24px
    height 24px
    margin-right 12px
    margin-top 12px
.footer-dialog
    height 53px
    box-sizing border-box
    padding-right: 15px;
    padding-left: 15px;
    flex-shrink 0
    display flex
    align-items center
.footer-dialog button
    flex-grow 1
    height 44px
    background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
    border-radius: 22px;
    border 0
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;

.num
    width 100%
    padding 0 12px
    box-sizing border-box
    display flex
    justify-content space-between

.num span
    color: rgb(51, 51, 51);
    font-size: 13px;
    font-weight: 600;
    line-height: 21px;















.box-details
    width 100%
    height 100%
    display flex
    flex-direction column

.content
    flex-grow 1
    overflow auto
    display flex
    flex-direction column

.content::-webkit-scrollbar
    width 0

.header 
    position relative

.header img
    position absolute
    top 5px
    left 12px
    z-index 10
    width 32px
    height 32px

.price-box
    height 36px
    margin-top 9px
    display flex
    box-sizing border-box
    padding-left: 12px;
    padding-right: 5px;
    align-items: center;
    justify-content space-between
    flex-shrink 0


.price-box
    color: rgb(153, 98, 26);
    font-size: 26px;
    font-weight: 500;
    margin-left: 2px;    

.price-box img 
    width 40px
    height 40px

.info
    display flex
    flex-direction column
    flex-shrink 0
    box-sizing border-box
    padding-left 12px
    padding-right 5px
    margin-top 10px

.title-box
    display flex
    align-items center

.title-box img
    height 20px
    width 50px
    margin-right 5px
.title
    color: rgb(51, 51, 51);
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;

.details
    color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    padding-left: 2px;

.discount
    flex-shrink 0
    margin-top 20px

.address
    padding 8px 0
    display flex
    flex-direction column

.address img
    width 24px
    height 24px

.address p
    display flex
    height 24px
    padding 8px 0
    margin-right 6px


.address p span:first-child
    color: rgb(136, 136, 136);
    font-size: 14px;
    line-height: 23px;
    margin-left: 12px;
    margin-right: 17px;
    margin-top: 1px;
    width: 30px

.address p span:nth-child(2)
    color: rgb(51, 51, 51);
    font-size: 14px;
    line-height: 23px;
    margin-right: 5px;
    flex-grow 1





.footer
    background-color rgba(255, 255, 255, 0.9);
    border-top 1px solid rgb(237, 237, 237);
    flex-shrink 0
    height 53px
    display flex
    align-items center
    box-sizing border-box

.shop-cart
    height 100%
    width: 42px;
    margin 0 4px
    display flex
    flex-direction column
    align-items center
    justify-content space-evenly

.shop-cart p
    color: rgb(48, 49, 51);
    font-size: 9px;
    font-weight: bold;

.shop-cart img  
    height 24px
    width 24px


.btn-box
    height 100%
    flex-grow 1
    margin-left: 7px;
    margin-right: 12px;
    display flex
    align-items center

.btn-box button
    height 40px
    flex-grow 1
    color #fff
    font-size: 14px;
    font-weight: bold;

.btn-box button:first-child
    background: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    border 0

.btn-box button:last-child
    background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border 0
</style>